<template>
  <div class="videoTabChunk">
    <div class="tab-cover">
      <div class="g-v-shade" v-if="shadeFlag">
        <videoShade></videoShade>
      </div>
      <div class="c-small-exclusive" v-if="!shadeFlag">独家</div>
      <div class="c-small-variety" v-if="!shadeFlag">综艺</div>
    </div>
    <div class="user-title">{{ title }}</div>
    <div class="user-up">up 花小果的日常</div>
    <div class="user-content">播放量</div>
  </div>
</template>

<script>
import videoShade from '@/components/video-box/video-shade'
export default {
  name: 'FissionFriendsH5VideotabChunk',
  components: {
    videoShade
  },
  props: {
    title: {
      type: String,
      default: '未知'
    },
    shadeFlag: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.videoTabChunk {
  display: flex;
  flex-direction: column;
  width: 150px;
  margin: 0 10px 10px 0;
  .tab-cover {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90px;
    border-radius: 10px;
    background-color: bisque;
    overflow: hidden;
    .g-v-shade {
      position: absolute;
      bottom: 1px;
      left: 0;
      width: 100%;
    }
    .c-small-exclusive {
      position: absolute;
      text-align: center;
      top: 5px;
      right: 5px;
      min-width: 30px;
      padding: 2px;
      background-color: aqua;
      border-radius: 4px;
    }
    .c-small-variety {
      position: absolute;
      text-align: center;
      bottom: 4px;
      left: 4px;
      min-width: 30px;
      padding: 2px;
      background-color: aqua;
      border-radius: 4px;
    }
  }
  //   .user-up,
  .user-content {
    margin: 2px 0;
  }
  .user-title {
    margin: 5px 0;
  }
}
</style>
